<!--
 * @Author: songtao
 * @Date: 2021-11-11 19:03:15
 * @LastEditTime: 2021-11-16 19:16:21
 * @FilePath: \vue-cars\vue-admin\src\icons\SvgIcon.vue
-->
<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="svgName"></use>
    </svg>
</template>
<script>
import {reactive, ref, computed } from '@vue/composition-api';
export default {
    name:"svgIcon",
    props:{
        iconName:{
            type:String,
            default:''
        },
        iconClass:{
            type:String,
            default:''
        },
    },
    setup(props, {root}){
        // 计算属性：得出最终结果
        const svgName = computed(() => `#icon-${props.iconName}`)
        const svgClass = computed(() => {
            if(props.iconClass){
                return `svg-icon ${props.iconClass}`
            }else{
                return `svg-icon`
            }
        })
        
        return {
            svgName,
            svgClass
        }
    }
}
</script>
<style lang="scss" scoped>
.svg-icon{
     width: 1em;
     height: 1em;
     &.font20{
         font-size: 20px;
     }
}
</style>